﻿@using System.ComponentModel.DataAnnotations

<MCard
    Class="mx-auto"
    Style="max-width: 500px;">
    <MSystemBar
        Color="deep-purple darken-4"
        Dark>
        <MSpacer></MSpacer>
        <MIcon Small>
            mdi-square
        </MIcon>
        <MIcon
            Class="ml-1"
            Small>
            mdi-circle
        </MIcon>
        <MIcon
            Class="ml-1"
            Small>
            mdi-triangle
        </MIcon>
    </MSystemBar>
    <MToolbar
        Color="deep-purple accent-4"
        Cards
        Dark
        Flat>
        <MButton Icon>
            <MIcon>mdi-arrow-left</MIcon>
        </MButton>
        <MCardTitle Class="text-h6 font-weight-regular">
            Sign up
        </MCardTitle>
        <MSpacer></MSpacer>
        <MButton Icon>
            <MIcon>mdi-magnify</MIcon>
        </MButton>
        <MButton Icon>
            <MIcon>mdi-dots-vertical</MIcon>
        </MButton>
    </MToolbar>
    <MForm
        @ref="form"
        Model="model"
        Class="pa-4 pt-6">
        <MTextField
            @bind-Value="model.Password"
            Filled
            Color="deep-purple"
            Counter="6"
            Label="Password"
            Style="min-height: 96px"
            Type="password">
        </MTextField>
        <MTextField
            @bind-Value="model.Phone"
            Filled
            Color="deep-purple"
            Label="Phone number">
        </MTextField>
        <MTextField
            @bind-Value="model.Email"
            Filled
            Color="deep-purple"
            Label="Email address"
            Type="email">
        </MTextField>
        <MTextarea
            @bind-Value="model.Bio"
            AutoGrow
            Filled
            Color="deep-purple"
            Label="Bio"
            Rows="1">
        </MTextarea>
        <MCheckbox
            @bind-Value="model.Agreement"
            Color="deep-purple">
            <LabelContent>
                I agree to the
                <a
                    href="#" @onclick="() => dialog = true" @onclick:stopPropagation>
                    Terms of Service
                </a>
                and
                <a
                    href="#" @onclick="() => dialog = true" @onclick:stopPropagation>
                    Privacy Policy
                </a>*

            </LabelContent>
        </MCheckbox>
    </MForm>
    <MDivider></MDivider>
    <MCardActions>
        <MButton
            Text
            OnClick="@(() => model.Clear())">
            Clear
        </MButton>
        <MSpacer></MSpacer>
        <MButton
            Disabled="!IsValid"
            Class="white--text"
            Color="deep-purple accent-4"
            Depressed
            OnClick="() => form.EditContext.Validate()">
            Submit
        </MButton>
    </MCardActions>
    <MDialog
        @bind-Value="dialog"
        Absolute
        MaxWidth="400"
        Persistent>
        <MCard>
            <MCardTitle Class="text-h5 grey lighten-3">
                Legal
            </MCardTitle>
            <MCardText>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </MCardText>
            <MDivider></MDivider>
            <MCardActions>
                <MButton
                    Text
                    OnClick="() => {model.Agreement = false; dialog = false;}">
                    No
                </MButton>
                <MSpacer></MSpacer>
                <MButton
                    Class="white--text"
                    Color="deep-purple accent-4"
                    OnClick="() => {model.Agreement = true; dialog = false;}">
                    Yes
                </MButton>
            </MCardActions>
        </MCard>
    </MDialog>
</MCard>

@code {

    static string bio = "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts";

    bool dialog;
    MForm form;
    Signup model = new() {Bio = bio};

    bool IsValid => form != null && form.EditContext.IsModified() && form.EditContext.Validate(); // is right usage?

    public class Signup
    {
        [Required]
        [MaxLength(6)]
        [MinLength(6)]
        public string Password { get; set; }

        [Required]
        [Phone]
        public string Phone { get; set; }

        [Required]
        [EmailAddress]
        public string Email { get; set; }

        public string Bio { get; set; }

        [Required]
        [Range(typeof(bool), "true", "true", ErrorMessage = "The field is required")] // just for demo
        public bool Agreement { get; set; }

        public void Clear()
        {
            Password = null;
            Phone = null;
            Email = null;
            Bio = null;
            Agreement = false;
        }
    }

}